<template>
    <div style="width: 95%;margin: 0 auto;">
        <div style="margin: 40px 15px;">
            <a-card :style="{ width: '100%' }" :title="searchResultTitle">
                <template v-for="video in searchResult">
                    <a-row class="list-card-item">
                        <!-- 视频信息 -->
                        <div class="video-info">
                            <img v-lazy="video.img" />
                            <div class="video-info-box">
                                <div>
                                    <h3 class="video-info-title">{{ video.name }}</h3>
                                </div>
                                <div>
                                    <span>类型：</span>{{ video.category }}<br />
                                    <span>地区：</span>{{ video.region }}<br />
                                    <span>年份：</span>{{ video.year }}年<br />
                                    <span>导演：</span>{{ video.director }}<br />
                                </div>
                                <div>
                                    <span>主演：</span>
                                    {{ video.actors }}
                                </div>
                                <!-- 简介 -->
                                <div class="video-info-introduction">
                                    <span>简介：</span>
                                    {{ video.intro }}
                                </div>
                            </div>
                        </div>
                        <!-- 点评 -->
                        <div class="video-comment">
                            <span>点评：</span>
                            <span class="video-comment-txt">
                                {{ video.comment }}
                            </span>
                        </div>
                        <!-- 视频链接 -->
                        <div class="video-link">
                            <a-tag class="video-origin-link-tag" color="red">
                                <a :href="video.url" target="_blank">源站观看</a>
                            </a-tag>

                            <a-tag class="video-links-tag" color="purple" :checked="false"
                                @click="getVideoLinks(video.id)" style="margin-left: 20px;">显示链接</a-tag>
                            <div id="video-links" class="video-links" style="margin: 10px 0;" v-if="videoLinksVisible">
                                <a-space wrap id="video-links-alist">
                                    <a-link style="font-size: 12px;" v-for="link in videoLinkListMap[video.id]"
                                        @click="getRealLink(link.url)">
                                        {{ link.name }}
                                    </a-link>
                                </a-space>
                            </div>
                        </div>
                    </a-row>

                    <a-divider />
                </template>
            </a-card>
        </div>
    </div>

    <!-- 弹出视频播放窗口 -->
    <a-modal v-model:visible="playerIsShow" :width="1200" :hide-cancel="true" :closable="false" :esc-to-close="false"
        :mask-closable="false" okText="退出" @close="playerHandleClose"
        :body-style="{ 'height': '600px', 'width': '100%', 'padding': '0' }">
        <template #footer>
            <a-button type="primary" size="mini" @click="playerHandleClose">退出</a-button>
        </template>

        <iframe :src="videoRealPlaylink" style="height: 98.5%;width: 100%;z-index: 2000;" frameborder="0" border="0"
            marginwidth="0" marginheight="0" scrolling="no" allowfullscreen="allowfullscreen"
            mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen"
            oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen" security="restricted"
            sandbox="allow-same-origin allow-forms allow-scripts"></iframe>
    </a-modal>
</template>




<script>
import { ref, defineComponent, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { Message } from '@arco-design/web-vue';
import { getTeleplayLinks } from '../api/teleplay';
import { getMovieLinks } from '../api/movie';
import { getAnimationLinks } from '../api/animation';
import { getRealPlaylink } from '../api/playlink';
import { search } from '../api/search';

export default defineComponent({
    setup() {
        const route = useRoute();

        const vcate = ref('');
        const searchResultTitle = ref('');
        const searchResult = ref([]);

        const videoLinkListMap = ref(new Map());    // 视频播放链接列表
        const videoLinksVisible = ref(false);    // 视频链接是否显示
        const playerIsShow = ref(false);  // 视频播放弹窗是否显示
        const videoRealPlaylink = ref('');    // 视频真实播放地址


        let oldVideoId = '';
        // 获取并显示视频连接
        const getVideoLinks = (videoId) => {
            if (videoLinksVisible.value == true) {   // 可视
                videoLinksVisible.value = false;    // 置为隐藏
                return;
            }
            if (videoLinkListMap.value[videoId] && videoId == oldVideoId) {   // 已经有数据
                videoLinksVisible.value = true;
                return;
            }

            switch (vcate.value) {
                case '1':
                    // 获取动漫视频集数链接
                    getTeleplayLinks(videoId).then(res => {
                        if (res.code != 200) {
                            Message.error("获取播放链接失败");
                            return;
                        }
                        videoLinkListMap.value[videoId] = res.data;
                        // 显示
                        videoLinksVisible.value = true;
                        oldVideoId = videoId;
                    }).catch(err => { console.log(err); });
                    break;
                case '2':
                    // 获取动漫视频集数链接
                    getMovieLinks(videoId).then(res => {
                        if (res.code != 200) {
                            Message.error("获取播放链接失败");
                            return;
                        }
                        videoLinkListMap.value[videoId] = res.data;
                        // 显示
                        videoLinksVisible.value = true;
                        oldVideoId = videoId;
                    }).catch(err => { console.log(err); });
                    break;
                case '3':
                    // 获取动漫视频集数链接
                    getAnimationLinks(videoId).then(res => {
                        if (res.code != 200) {
                            Message.error("获取播放链接失败");
                            return;
                        }
                        videoLinkListMap.value[videoId] = res.data;
                        // 显示
                        videoLinksVisible.value = true;
                        oldVideoId = videoId;
                    }).catch(err => { console.log(err); });
                    break;

                default:
                    break;
            }




        };

        // 获取真实播放地址
        const getRealLink = (url) => {
            switch (vcate.value) {
                case '1':
                    // 电视剧
                    getRealPlaylink("teleplay", url).then(res => {
                        if (res.code != 200 || res.data == '') {
                            Message.error("获取地址失败");
                            return;
                        }
                        videoRealPlaylink.value = res.data;
                        playerIsShow.value = true;

                    }).catch(err => { console.log(err) });
                    break;
                case '2':
                    // 电影
                    getRealPlaylink("movie", url).then(res => {
                        if (res.code != 200 || res.data == '') {
                            Message.error("获取地址失败");
                            return;
                        }
                        videoRealPlaylink.value = res.data;
                        playerIsShow.value = true;

                    }).catch(err => { console.log(err) });
                    break;
                case '3':
                    // 动漫
                    getRealPlaylink("animation", url).then(res => {
                        if (res.code != 200 || res.data == '') {
                            Message.error("获取地址失败");
                            return;
                        }
                        videoRealPlaylink.value = res.data;
                        playerIsShow.value = true;

                    }).catch(err => { console.log(err) });
                    break;

                default:
                    break;
            }


        };

        // 退出视频播放
        const playerHandleClose = () => {
            videoRealPlaylink.value = '';
            playerIsShow.value = false;
        }

        onMounted(() => {
            vcate.value = route.query.vcate;
            const keywords = route.query.keywords;
            // console.log(keywords);

            search(vcate.value, keywords).then(res => {
                if (res.code != 200) {
                    Message.error("失败");
                    return;
                }
                searchResult.value = res.data;
                searchResultTitle.value = `【 ${keywords} 】共搜索到 ${res.data.length} 条记录`;
            });
        });


        return {
            searchResultTitle,
            searchResult,

            videoLinkListMap,
            videoLinksVisible,
            playerIsShow,
            videoRealPlaylink,

            getVideoLinks,
            getRealLink,
            playerHandleClose,

        }
    },
});
</script>




<style scoped>
.list-card {
    width: 95%;
    margin: 15px 0;
}

.list-card .arco-card-header {
    background-color: aliceblue !important;
}

.list-card-box {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.list-card-item {
    display: inline-flex;
    /* height: 250px; */
    align-items: center;
}

.list-card-item img {
    width: 160px;
    height: 200px;
    border-radius: 2px;
}

.video-info {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.video-info-box {
    margin: 0 15px;
    flex: 1;
    line-height: 16px;
    font-size: 12px;
}

.video-info-box span {
    color: #777;
}

.video-info-title {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: #333;
    font-weight: 600;
}

.video-info-introduction {
    max-height: 90px;
    overflow-y: auto;
}

.video-comment {
    width: 100%;
    margin-top: 10px;
}

.video-comment-txt {
    font-size: 14px;
    font-style: italic;
    font-weight: 500;
    color: #e6b406;
}

.video-links-tag:hover {
    cursor: pointer;
}

.video-origin-link-tag:hover {
    cursor: pointer;
}

.video-origin-link-tag a {
    text-decoration: none;
}

.video-link {
    width: 100%;
    margin-top: 10px;
}
</style>